// 引入折线图组件
import 'echarts/lib/chart/line';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import echarts from 'echarts/lib/echarts';

import sortBy from 'lodash.sortby';

export default {
  data() {
    return {
    };
  },
  methods: {
    drawNormalLineChart(id, chartData, options = {}) {
      const myChart = echarts.init(document.getElementById(id));
      // 升序
      chartData = sortBy(chartData, 'date');
      const xAxisData = chartData.map(item => item.date);
      const data = chartData.map(item => item.value);

      const chartOptions = {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross',
          //   snap: true
          // },
          formatter(params) {
            if (options.tooltipFormatter) {
              return options.tooltipFormatter(params);
            }
          },
          textStyle: {
            fontSize: 10,
          },
          padding: [10, 5],
          backgroundColor: '#fff',
          confine: true,
          extraCssText: 'width:auto;box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.25);z-index:99;',
        },
        legend: {
          show: false
        },
        grid: {
          left: '2',
          right: '2',
          top: '15',
          bottom: '15',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: { // 坐标轴刻度
            show: true,
            alighWithLabel: true,
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            },
          },
          axisPointer: {
            snap: false,
            type: 'line',
            show: true,
            lineStyle: {
              color: '#8fb5ff',
              type: 'dashed'
            },
            label: {
              show: false
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            color: '#858c9e',
            fontSize: 12,
            align: 'center',
            // interval: (index, value) => {
            //   return true;
            // },
            formatter(value) {
              return `${value.slice(5, 7)}/${value.slice(8, 10)}\n${value.slice(0, 4)}`;
            },
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            inside: true,
            padding: [0, 0, 12, -5],
            textStyle: {
              color: '#5e6678',
              fontSize: 12,
              left: '10%',
            },
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#e4e7dc',
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e4e7dc',
              width: 0.5
            }
          },
        },
        series: {
          type: 'line',
          data,
          symbol: 'circle',
          symbolSize: 5,
          itemStyle: {
            color: '#fff',
            borderColor: '#1f6aff',
            borderWidth: 1
          },
          emphasis: {
            itemStyle: {
              color: '#1f6aff',
              borderColor: '#1f6aff',
              borderWidth: 1
            }
          },
          lineStyle: {
            color: '#1f6aff',
          },
        }
      };
      myChart.setOption(chartOptions);
    }
  }
};